<template>
  <div>
    <el-card class="box-card">
      <h3>新建住户</h3>
    </el-card>
    <el-card style="margin-top: 20px">
      <span>基础信息</span>
      <div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="forms"
          style="width: 400px; margin-left: 200px; margin-top: 40px"
        >
          <el-form-item label="关联房屋">
            <el-select v-model="tableData.middleId" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.middleId"
                :label="item.buildings[0].name"
                :value="item.middleId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="住户姓名">
            <el-input v-model="forms.userName"></el-input>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input v-model="forms.idCard"></el-input>
          </el-form-item>
          <el-form-item label="与业主关系">
             <el-select v-model="forms.relationShip" clearable placeholder="请选择">
                <el-option label="业主" value="业主"></el-option>
                <el-option label="亲戚" value="亲戚"></el-option>
                <el-option label="住户" value="住户"></el-option>
                 <el-option label="朋友" value="朋友"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="forms.phone"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="forms.remark"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-left: 350px">
          <el-button type="primary" @click="addUser">提交</el-button>
          <el-button style="margin-left: 50px" type="primary">重置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: {
        middleId:"",
        userName: "",
        idCard: "",
        relationShip: "",
        phone: "",
        remark: "",
      },
      tableData: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    addUser() {
      this.forms.middleId = this.tableData.middleId;
      console.log(this.forms);
      this.$axios.post("/serverzc/cell/adduser", this.forms).then((res) => {
        this.$router.push({
          path: "/resident",
        });
      });
    },
    load() {
      this.$axios
        .post("/serverzc/cell/load?id=" + localStorage.getItem("communityId"))
        .then((res) => {
          this.tableData = res.data.data.data;
          console.log(this.tableData);
          for (var i = 0; this.tableData.length; i++) {
            var a =
              this.tableData[i].buildings[0].howMany +
              this.tableData[i].portal[0].howPortal;
              this.tableData[i].buildings[0].name = a;
            console.log(a);
          }
        });
    },
  },
};
</script>

<style scoped>
</style>